﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this demo is simulated the touch-device behavior of the jqxTree
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.black.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxtree.js"></script>
    <script type="text/javascript" src="simulator.js"></script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            prepareDemo("tree");
         
            var source = [
                { icon: "../images/mailIcon.png", label: "Mail", expanded: true, items: [
                    { icon: "../images/calendarIcon.png", label: "Calendar" },
                    { icon: "../images/contactsIcon.png", label: "Contacts", selected: true }
                ]
                },
                { icon: "../images/folder.png", label: "Inbox", expanded: true, items: [
                   { icon: "../images/folder.png", label: "Admin" },
                   { icon: "../images/folder.png", label: "Corporate" },
                   { icon: "../images/folder.png", label: "Finance" },
                   { icon: "../images/folder.png", label: "Support" },
                   { icon: "../images/folder.png", label: "Drafts" },
                   { icon: "../images/folder.png", label: "Other" },
                ]
                },
                { icon: "../images/notesIcon.png", label: "Notes" },
                { iconsize: 14, icon: "../images/settings.png", label: "Settings" },
                { icon: "../images/favorites.png", label: "Favorites" },
             ];

            // create jqxTree
            $('#tree').jqxTree({ source: source, width: '100%', height: '100%', theme: 'black' });
            initDemo("tree");
        });
    </script>
</head>
<body class='default'>
    <div id="demoContainer" style="margin-left: 220px; width: 460px; height: 849px; overflow: hidden;
        background-image: url(../images/galaxys3.jpg);">
        <div id="container" style="margin-left: 40px; height: 630px; width: 376px; margin-top: 112px;">
            <div id='tree'>
            </div>
        </div>
    </div>
</body>
</html>
